<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>临时测试</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: var(--grey-color);
      }

      :root {
        --grey-color: #454344;
        --gold-color: #f49904;
        --red-color: #732f2f;
        --silver-color: #b3b3b3;
        --bar-1-duration: 2s;
        --bar-2-delay: calc(var(--bar-1-duration) + 0.3s);
      }

      .w-half {
        width: 50%;
      }

      .w-quarter-3 {
        width: 75%;
      }

      .bar-1 {
        position: absolute;
        display: flex;
        align-items: center;
        -webkit-animation: rotate-right-out 0.3s var(--bar-1-duration) both;
        animation: rotate-right-out 0.3s var(--bar-1-duration) both;
      }
      .bar-1 .arrow {
        width: 2rem;
        height: 3rem;
        background: var(--gold-color);
      }
      .bar-1 .arrow.left {
        -webkit-clip-path: polygon(
          100% 0,
          100% 20%,
          40% 50%,
          100% 80%,
          100% 100%,
          0 50%
        );
        clip-path: polygon(
          100% 0,
          100% 20%,
          40% 50%,
          100% 80%,
          100% 100%,
          0 50%
        );
        -webkit-animation: slide-left-in 1s var(--ease-out-quart) both;
        animation: slide-left-in 1s var(--ease-out-quart) both;
      }
      .bar-1 .arrow.right {
        -webkit-clip-path: polygon(
          0 20%,
          0 0,
          100% 50%,
          0 100%,
          0 80%,
          60% 50%
        );
        clip-path: polygon(0 20%, 0 0, 100% 50%, 0 100%, 0 80%, 60% 50%);
        -webkit-animation: slide-right-in 1s var(--ease-out-quart) both;
        animation: slide-right-in 1s var(--ease-out-quart) both;
      }
      .bar-1 .lines {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
      .bar-1 .lines > * ~ * {
        margin-top: 0.5rem;
      }
      .bar-1 .lines .line {
        height: 1px;
        background: var(--gold-color);
        -webkit-animation: scale-x-in 0.8s var(--ease-out-quart) both;
        animation: scale-x-in 0.8s var(--ease-out-quart) both;
      }
      .bar-1 .block {
        padding: 0.75rem 3rem;
        margin: 0.5rem 0;
        font-size: 1.5rem;
        line-height: 1;
        font-weight: bold;
        color: white;
        background: var(--red-color);
        border: 1px solid var(--gold-color);
        -webkit-animation: scale-x-in 1.2s 0.15s var(--ease-out-quart) both;
        animation: scale-x-in 1.2s 0.15s var(--ease-out-quart) both;
      }

      .bar-2 {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-animation: rotate-left-in 0.3s var(--bar-1-duration) both;
        animation: rotate-left-in 0.3s var(--bar-1-duration) both;
      }
      .bar-2 .clips {
        display: flex;
      }
      .bar-2 .clips .clip {
        width: 4rem;
        height: 3rem;
        background: white;
      }
      .bar-2 .clips .clip:first-child {
        width: 2rem;
        -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
        clip-path: polygon(0 0, 0% 100%, 100% 0);
      }
      .bar-2 .clips .clip:not(:first-child):not(:last-child) {
        -webkit-clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);
        clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);
      }
      .bar-2 .clips .clip:last-child {
        width: 2rem;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
        clip-path: polygon(100% 0, 0% 100%, 100% 100%);
      }
      .bar-2 .clips .clip:nth-child(odd) {
        -webkit-animation: slide-right-top-in 0.8s var(--ease-out-quart) both;
        animation: slide-right-top-in 0.8s var(--ease-out-quart) both;
      }
      .bar-2 .clips .clip:nth-child(even) {
        -webkit-animation: slide-left-bottom-in 0.8s var(--ease-out-quart) both;
        animation: slide-left-bottom-in 0.8s var(--ease-out-quart) both;
      }
      .bar-2 .arrows {
        position: absolute;
        width: 2rem;
        height: 2rem;
      }
      .bar-2 .arrows .arrow {
        position: absolute;
        width: 2rem;
        height: 2rem;
        background: var(--silver-color);
      }
      .bar-2 .arrows .arrow.top {
        top: -2.5rem;
        -webkit-clip-path: polygon(100% 0, 50% 70%, 0 0);
        clip-path: polygon(100% 0, 50% 70%, 0 0);
        -webkit-animation: slide-bottom-in 0.8s var(--bar-2-delay)
          var(--ease-out-quart) both;
        animation: slide-bottom-in 0.8s var(--bar-2-delay) var(--ease-out-quart)
          both;
      }
      .bar-2 .arrows .arrow.right {
        right: -11rem;
        -webkit-clip-path: polygon(30% 50%, 100% 100%, 100% 0);
        clip-path: polygon(30% 50%, 100% 100%, 100% 0);
        -webkit-animation: slide-left-in-2 0.8s var(--bar-2-delay)
          var(--ease-out-quart) both;
        animation: slide-left-in-2 0.8s var(--bar-2-delay) var(--ease-out-quart)
          both;
      }
      .bar-2 .arrows .arrow.bottom {
        bottom: -2.5rem;
        -webkit-clip-path: polygon(100% 100%, 50% 30%, 0 100%);
        clip-path: polygon(100% 100%, 50% 30%, 0 100%);
        -webkit-animation: slide-top-in 0.8s var(--bar-2-delay)
          var(--ease-out-quart) both;
        animation: slide-top-in 0.8s var(--bar-2-delay) var(--ease-out-quart)
          both;
      }
      .bar-2 .arrows .arrow.left {
        left: -11rem;
        -webkit-clip-path: polygon(70% 50%, 0 100%, 0 0);
        clip-path: polygon(70% 50%, 0 100%, 0 0);
        -webkit-animation: slide-right-in-2 0.8s var(--bar-2-delay)
          var(--ease-out-quart) both;
        animation: slide-right-in-2 0.8s var(--bar-2-delay)
          var(--ease-out-quart) both;
      }
      .bar-2 .block {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        font-size: 1.5rem;
        line-height: 1;
        font-weight: bold;
        color: white;
        background: var(--silver-color);
        -webkit-animation: scale-x-in 1.2s calc(var(--bar-2-delay) + 0.6s)
          var(--ease-out-quart) both;
        animation: scale-x-in 1.2s calc(var(--bar-2-delay) + 0.6s)
          var(--ease-out-quart) both;
      }
      .bar-2 .lines {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .bar-2 .lines .line {
        position: absolute;
        width: 45%;
        height: 1px;
        background: white;
      }
      .bar-2 .lines .line.left-top {
        top: -0.5rem;
        left: 0;
        transform-origin: right;
        -webkit-animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
        animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
      }
      .bar-2 .lines .line.right-top {
        top: -0.5rem;
        right: 0;
        transform-origin: left;
        -webkit-animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
        animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
      }
      .bar-2 .lines .line.left-bottom {
        bottom: -0.5rem;
        left: 0;
        transform-origin: right;
        -webkit-animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
        animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
      }
      .bar-2 .lines .line.right-bottom {
        bottom: -0.5rem;
        right: 0;
        transform-origin: left;
        -webkit-animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
        animation: scale-x-in 0.8s calc(var(--bar-2-delay) + 0.8s)
          var(--ease-out-quart) both;
      }

      .scale-in-bounce {
        opacity: 0;
        -webkit-animation: scale-in-bounce 0.2s both;
        animation: scale-in-bounce 0.2s both;
        -webkit-animation-delay: calc(var(--basic-delay) + 0.05s * var(--i));
        animation-delay: calc(var(--basic-delay) + 0.05s * var(--i));
      }

      @-webkit-keyframes slide-left-in {
        from {
          transform: translateX(1000%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
        }
      }

      @keyframes slide-left-in {
        from {
          transform: translateX(1000%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
        }
      }
      @-webkit-keyframes slide-right-in {
        from {
          transform: translateX(-1000%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
        }
      }
      @keyframes slide-right-in {
        from {
          transform: translateX(-1000%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
        }
      }
      @-webkit-keyframes scale-x-in {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
      @keyframes scale-x-in {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
      @-webkit-keyframes scale-in-bounce {
        0% {
          opacity: 0;
          transform: scale(2.5);
        }
        40% {
          opacity: 1;
          transform: scale(0.8);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes scale-in-bounce {
        0% {
          opacity: 0;
          transform: scale(2.5);
        }
        40% {
          opacity: 1;
          transform: scale(0.8);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @-webkit-keyframes rotate-right-out {
        to {
          transform: rotate(90deg);
          opacity: 0;
        }
      }
      @keyframes rotate-right-out {
        to {
          transform: rotate(90deg);
          opacity: 0;
        }
      }
      @-webkit-keyframes rotate-left-in {
        from {
          transform: rotate(-45deg);
          opacity: 0;
        }
      }
      @keyframes rotate-left-in {
        from {
          transform: rotate(-45deg);
          opacity: 0;
        }
      }
      @-webkit-keyframes slide-right-top-in {
        from {
          transform: translate(50%, -100%);
          opacity: 0.5;
        }
        to {
          transform: translate(0, 0);
          opacity: 1;
        }
      }
      @keyframes slide-right-top-in {
        from {
          transform: translate(50%, -100%);
          opacity: 0.5;
        }
        to {
          transform: translate(0, 0);
          opacity: 1;
        }
      }
      @-webkit-keyframes slide-left-bottom-in {
        from {
          transform: translate(-50%, 100%);
          opacity: 0.5;
        }
        to {
          transform: translate(0, 0);
          opacity: 1;
        }
      }
      @keyframes slide-left-bottom-in {
        from {
          transform: translate(-50%, 100%);
          opacity: 0.5;
        }
        to {
          transform: translate(0, 0);
          opacity: 1;
        }
      }
      @-webkit-keyframes slide-bottom-in {
        from {
          transform: translateY(300%);
          opacity: 0.5;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes slide-bottom-in {
        from {
          transform: translateY(300%);
          opacity: 0.5;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @-webkit-keyframes slide-top-in {
        from {
          transform: translateY(-300%);
          opacity: 0.5;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes slide-top-in {
        from {
          transform: translateY(-300%);
          opacity: 0.5;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @-webkit-keyframes slide-left-in-2 {
        from {
          transform: translateX(-1150%);
          opacity: 0.5;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes slide-left-in-2 {
        from {
          transform: translateX(-1150%);
          opacity: 0.5;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @-webkit-keyframes slide-right-in-2 {
        from {
          transform: translateX(1150%);
          opacity: 0.5;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes slide-right-in-2 {
        from {
          transform: translateX(1150%);
          opacity: 0.5;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
    </style>
    <script>
      window.onload = () => {
        const scaleInConfig = {
          type: "chars",
          charsClass: "scale-in-bounce",
        };
        const staggeredScaleInTexts = document.querySelectorAll(
          ".staggered-scale-in"
        );
        const split1 = new SplitText(staggeredScaleInTexts[0], scaleInConfig);
        const split2 = new SplitText(staggeredScaleInTexts[1], scaleInConfig);
        split1.chars.forEach((item, i) => {
          item.style.setProperty("--basic-delay", "0.7s");
          item.style.setProperty("--i", `${i}`);
        });
        split2.chars.forEach((item, i) => {
          item.style.setProperty("--basic-delay", "3.3s");
          item.style.setProperty("--i", `${i}`);
        });
      };
    </script>
  </head>
  <body>
    <div class="relative flex items-center justify-center">
      <div class="bar-1">
        <div class="arrow left"></div>
        <div class="flex flex-col items-center self-stretch">
          <div class="lines top">
            <div class="line w-half" style="animation-delay: 1s"></div>
            <div class="line w-quarter-3" style="animation-delay: 0.8s"></div>
          </div>
          <div class="block">
            <span class="whitespace-no-wrap staggered-scale-in"
              >High stakes table</span
            >
          </div>
          <div class="lines bottom">
            <div class="line w-quarter-3" style="animation-delay: 0.8s"></div>
            <div class="line w-half" style="animation-delay: 1s"></div>
          </div>
        </div>
        <div class="arrow right"></div>
      </div>
      <div class="bar-2">
        <div class="clips -space-x-8">
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.35s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.3s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.25s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.2s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.15s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.1s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.15s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.2s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.25s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.3s)"
          ></div>
          <div
            class="clip"
            style="animation-delay: calc(var(--bar-1-duration) + 0.35s)"
          ></div>
        </div>
        <div class="arrows">
          <div class="arrow top"></div>
          <div class="arrow right"></div>
          <div class="arrow bottom"></div>
          <div class="arrow left"></div>
        </div>
        <div class="block">
          <span class="absolute staggered-scale-in">$100-$200</span>
        </div>
        <div class="lines">
          <div class="line left-top"></div>
          <div class="line right-top"></div>
          <div class="line left-bottom"></div>
          <div class="line right-bottom"></div>
        </div>
      </div>
    </div>
  </body>
</html>
